<script setup>
// import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'


const list = ref([
  {
    id:'1',
    subject: 'Vue.js前端开发实战',
    content: '学习指令，例如v-for,v-if,v-model等',
    place: '自习室',
    status:false,
  },
])
// 删除任务
let remove = (id,status) => {
  if(status){
    list.value = list.value.filter(item => item.id !== id)
  }else{
    alert('请完成学习计划后再进行删除操作!')
  }
}
// 实现学习计划的添加功能
let subject = ref('')  //学习科目
let content = ref('')  //学习内容
let nextId = ref('')   //数据的id
let selectedOption = ref('自习室')  //默认选中的学习地点
let options = ref([ 
  { 
    placeCode: 0, 
    place: '自习室', 
  }, 
  { 
    placeCode: 1, 
    place: '图书馆', 
  }, 
  { 
    placeCode: 2, 
    place: '宿舍', 
  }, 
])

// 学习计划添加方法
let add = () => {
  if ( subject.value === '') {
    alert('学习科目为必填项!')
    return
  }
  // Math.max()返回一组数中的最大值
  // list.value.map(item => item.id): 这部分代码将列表中每个对象的id提取出来，形成一个新的数组。
  // Math.max(...list.value.map(item => item.id)): 这部分代码使用扩展运算符(...)将数组中的所有元素作为参数传递给Math.max()函数，
  // 从而得到数组中的最大值。
  // + 1: 最后再将最大值加1，得到下一个id的值。
  nextId.value = Math.max(...list.value.map(item => item.id)) + 1
  const obj = {
    id: nextId.value,
    subject: subject.value,
    content: content.value,
    place: selectedOption.value,
    status:false,
  }
  list.value.push(obj)
  subject.value = ''
  content.value = ''
  selectedOption.value = '自习室'
 
}

</script>


<template>
<!-- 学习计划表 -->
<div class="card">
<!-- 标题区域 -->
<div class="card-header">学习计划表</div>
<!-- 提交区域 -->
<div class="card-body">
  <!-- 
    添加事件处理函数为 add()，
    同时为 submit 事件添加事件修饰符 prevent，
    用来阻止表单的默认提交行为。
    实现在单击按钮后提交表单，执行 add()方法。 
    <form @submit.prevent="add"> 
    ……（原有代码） 
    </form>
  -->
  <form @submit.prevent="add">
    <div class="row g-4">
      <!-- 学习科目 -->
      <div class="col-auto">
        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">学习科目</span>
          <!-- 
            vue中v-model的三种修饰符:lazy,numer,trim
            lazy 修饰符: 使模型绑定的数据只有在失去焦点或者是按下回车时才会更新
            number 修饰符: 使输入框中输入的内容自动转换为数字类型
            trim 修饰符: 过滤掉内容左右两边的的空格
          -->
          <input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject" />
        </div>
      </div>
      <!-- 学习任务 -->
      <div class="col-auto">
        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">学习内容</span>
          <textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容" :style="{ height: '32px' }"></textarea>
        </div>
      </div>
      <!-- 学习地点 -->
      <div class="col-auto">
        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">学习地点</span>
          <!-- 通过<select>标签定义了下拉列表 -->
          <select class="form-select form-select-sm" v-model="selectedOption">
            <option v-for="option in options" :value="option.place" :key="option.placeCode">
              {{ option.place }}
            </option>
          </select>
        </div>
      </div>
      <!-- 添加按钮 -->
      <div class="col-auto">
        <!-- <button @click="add" type="submit" class="btn btn-primary">添加</button> -->
        <button type="submit" class="btn btn-primary">添加</button>
      </div>
    </div>
  </form>
</div>
</div>
<table class="table table-striped table-hover table-bordered">
 <thead>
    <tr>
      <th scope="col">序号</th>
      <th scope="col">学习科目</th>
      <th scope="col">学习内容</th>
      <th scope="col">学习地点</th>
      <th scope="col">完成状态</th>
      <th scope="col">操作</th>
    </tr>
 </thead>
 <tbody>
  <!-- <tr>
    <td>序号</td>
    <td>学习科目</td>
    <td>学习内容</td>
    <td>学习地点</td>
    <td>完成状态</td>
    <td>操作</td>
  </tr> -->
  <tr v-for="item in list" :key="item.id">
    <td>{{ item.id }}</td>
    <td>{{ item.subject }}</td>
    <td>{{ item.content }}</td>
    <td>{{ item.place }}</td>
    <td>
      <div class="form-check form-switch">
        <label class="form-check-label" :for="'cb' + item.id" v-if="item.status">已完成</label>
        <label class="form-check-label" :for="'cb' + item.id" v-else>未完成</label>
        <input class="form-check-input" type="checkbox" role="switch" :id="'cb' + item.id" v-model="item.status" />
      </div>
    </td>
    <td>
      <a href="javascript:;" @click="remove(item.id, item.status)">删除</a>
    </td>
  </tr>
 </tbody>
 </table>
</template>

<style scoped>

</style>
